<!DOCTYPE html>
<html>
  <head >
  <meta charset="utf-8">
	<script type="text/javascript" src="echarts.js"></script>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="china-main-city-map.js" charset="utf-8"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=F8GGZGTAevRPL7BwLtTjQvEzdAlpzqTt"></script>
	<script src="js/bmap.min.js" type="text/javascript" charset="utf-8"></script>
  </head>
  
  <body>
 <div id= "main" style="width:100%;height:600px;"></div>
 <div id = "contextMenu" style = "position: absolute;background:#000;opacity:0.8;cursor: pointer;border-radius: 2px;padding:8px 30px;display:none;color: #fff;font-size:14px;">返回上一级</div>
 <script type="text/javascript">
 
var myChart = echarts.init(document.getElementById('main'));

myChart.showLoading();

$.get('data/hangzhou-tracks.json', function (data) {
    myChart.hideLoading();
		console.log(data);
    var itemStyle = {
        normal: {
            opacity: 0.8,
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
    };

    var sizeFunction = function (x) {
        var y = Math.sqrt(x / 5e8) + 0.1;
        return y * 80;
    };
    // Schema:
    var schema = [
        {name: 'Income', index: 0, text: '人均收入', unit: '美元'},
        {name: 'LifeExpectancy', index: 1, text: '人均寿命', unit: '岁'},
        {name: 'Population', index: 2, text: '总人口', unit: ''},
        {name: 'Country', index: 3, text: '国家', unit: ''}
    ];
		var points = [].concat.apply([], data.map(function (track) {
		        return track.map(function (seg) {
		            return seg.coord.concat([1]);
		        });
		    }));
    option = {
        baseOption: {
        	  animation: false,
            backgroundColor: '#404a59',
            timeline: {
                axisType: 'category',
                orient: 'vertical',
                autoPlay: true,
                inverse: true,
                playInterval: 1000,
                left: null,
                right: 0,
                top: 20,
                bottom: 20,
                width: 55,
                height: null,
                label: {
                    normal: {
                        textStyle: {
                            color: '#999'
                        }
                    },
                    emphasis: {
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                symbol: 'none',
                lineStyle: {
                    color: '#555'
                },
                checkpointStyle: {
                    color: '#bbb',
                    borderColor: '#777',
                    borderWidth: 2
                },
                controlStyle: {
                    showNextBtn: false,
                    showPrevBtn: false,
                    normal: {
                        color: '#666',
                        borderColor: '#666'
                    },
                    emphasis: {
                        color: '#aaa',
                        borderColor: '#aaa'
                    }
                },
                data: []
            },
            bmap: {
		            center: [120.13066322374, 30.240018034923],
		            zoom: 14,
		            roam: true
		        },
		        
            visualMap: {
		            show: true,
		            top: 'top',
		            min: 0,
		            max: 5,
		            seriesIndex: 0,
		            calculable: true,
		            inRange: {
		                color: ['blue', 'blue', 'green', 'yellow', 'red']
		            }
		        },
            series: [
            	{
			            type: 'heatmap',
			            coordinateSystem: 'bmap',
			            data: points,
			            pointSize: 5,
			            blurSize: 6
			        }
            ]
        },
        options: []
    };

   for (var n = 0; n < data.timeline.length; n++) {
        option.baseOption.timeline.data.push(data.timeline[n]);
        option.options.push({
            title: {
                show: true,
                'text': data.timeline[n] + ''
            },
            series: {
                name: data.timeline[n],
                type: 'scatter',
                itemStyle: itemStyle,
                data: data.series[n],
                symbolSize: function(val) {
                    return sizeFunction(val[2]);
                }
            }
        });
    }
    console.log(option);
    myChart.setOption(option);
});
 
 </script>
     
  </body>
</html>
